<template>
  <div class="page-wrapper">
    <ul class="flex-ul">
      <li v-for="(item, index) in list"
          :key="index"
          :class="{'cur-page' : item.id == id}"
          @click="onRouter(item)">{{item.title}}</li>
    </ul>
  </div>
</template>

<script>
import {defineComponent, ref} from "vue";
import {useRouter} from 'vue-router'
export default defineComponent({
  name: "WebThree",
  props: {
    id: {
      type: Number,
      default: 1
    }
  },
  setup() {
    const router = useRouter()
    const list = ref([
      {id: 1,path: '/basic/home', title: 'threejs 第一次尝试'},
      {id: 2,path: '/basic/geometries', title: '3D场景中插入新的几何体'},
      {id: 3,path: '/basic/fixed-point', title: '顶点位置数据解析渲染'},
      {id: 4,path: '/basic/lines', title: '画线'},
    ])
    const onRouter = (item) => {
      router.push({path:`${item.path}`, query: {itemData:JSON.stringify(item)}})
    }
    return{
      list,
      onRouter,
    }
  }
})
</script>

<style scoped>

.flex-ul{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 300px;
}
.flex-ul li{
  flex: 1;
  cursor: pointer;
}
.flex-ul li:hover{
  color: #42b983;
}
.cur-page{
  color: #42b983;
}
</style>